<%@ page language="java" import="java.util.*"%>
<%@ page session="true"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="t"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../../template/estilos.jsp"%>
<%@include file="../../template/script.jsp" %>
<script src="${pageContext.request.contextPath}/resources/assets/scripts/module/Account.js" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/resources/assets/scripts/ui-jqueryui.js"></script>  
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css"/>
<title>Insert title here</title>

<script src="${pageContext.request.contextPath}/resources/assets/scripts/form-components.js"></script>  
<link rel="stylesheet" type="text/css" 
      href="${pageContext.request.contextPath}/resources/assets/plugins/bootstrap-datepicker/css/datepicker.css" />
<script type="text/javascript" 
src="${pageContext.request.contextPath}/resources/assets/plugins/jquery-tags-input/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

 
<title>Insert title here</title>
 <script>
     var FormSamples = function () {


    return {
        //main function to initiate the module
        init: function () {

            // use select2 dropdown instead of chosen as select2 works fine with bootstrap on responsive layouts.
            $('.select2_category').select2({
	            placeholder: "Select an option",
	            allowClear: true
	        });
 
        }

    };

}();
     </script>
</head>

<body class="page-header-fixed">
    <!--form action="#" name="listCountry" -->   
    <%@include file="../../template/header.jsp"%>
        <!--div class="page-container" -->
            
          <div class="page-container"> 
              <%@include file="../../template/sidebar.jsp"%>
            <div class="page-content">
              <form:form action="saveupdate"  id="form"  method="post"  class="form-horizontal formdata"  enctype="multipart/form-data">
                  
                <%@include file="../../template/header_module.jsp"%>
               <div class="row-fluid">
					<div class="span12">
						<!-- BEGIN EXAMPLE TABLE PORTLET-->
                                                <div class="container-fluid">
						<div class="portlet box grey">
							<div class="portlet-title">
								<div class="caption"><i class="icon-share"></i>View Account</div>
								 
							</div>
							<div class="portlet-body">
                                                           
                                                          <div class="tabbable tabbable-custom">
							    <ul class="nav nav-tabs">
							     <li class="active"><a href="#tab_1_1" data-toggle="tab">Informaci&oacute;n B&aacute;sica</a></li>
								<li><a href="#tab_1_2" data-toggle="tab">Datos de Facturaci&oacute;n</a></li>
                                                                <li><a href="#tab_1_3" data-toggle="tab">Datos de Env&iacute;o</a></li>
							    </ul>
                                                         
						<div class="tab-content">
					          <div class="tab-pane active" id="tab_1_1">
                                                      <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="ruc">Ruc  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="accountNo" name="accountNo" value="${val.accountNo.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
                                                                
                                                                <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="foundation">Current Account : &nbsp;</label>
								<div class="controls">
                                                                    <input class="m-wrap span12"  type="text" value="${val.currentAccount.trim()}" name="currentAccount" value="" id="currentAccount"/>
								</div>
							     </div>
						           </div>
							 </div>
                                                          
                                                            <div class="row-fluid">
                                                                <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="name">Name : &nbsp;</label>
								<div class="controls">
                                                                    <input type="text" id="nameAccount" name="name" value="${val.name.trim()}" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
                                                                
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="phone">Phone : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="phone" name="phone" value="${val.phone.trim()}" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   
							 </div>
                                                            
                                                         <div class="row-fluid">
                                                             <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="email">Email  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="email" name="email" value="${val.email.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
                                                                
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="website">Web Site : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="website" name="website" value="${val.website.trim()}" class="m-wrap span12"  >
								</div>
							     </div>
						           </div>
								  
							  
							 </div>
                                                            
                                                         <div class="row-fluid">
                                                              <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="fax">Fax  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="fax" name="fax" value="${val.fax.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
                                                                
							    <div class="span5">
							    <div class="control-group">
                                                            <label class="control-label">Foundation : &nbsp;</label>
                                                                <div class="controls">
                                                                 <div class="input-append date date-picker" data-date="2013-12-05" data-date-format="yyyy-mm-dd" data-date-viewmode="years">
                                                            <input class="m-wrap m-ctrl-medium date-picker" value="${val.foundation}" readonly size="16" type="text" id="foundation" name="foundation" /><span class="add-on"><i class="icon-calendar"></i></span>
                                                                 </div>
                                                                </div>
						           </div>
						           </div>
                                                             
                                                             
							 
							 </div> 
                                                      
                                                      <div class="control-group">
							<label class="control-label">Image Upload</label>
							 <div class="controls">
							  <div class="fileupload fileupload-new" data-provides="fileupload">
							   
							    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
                                                            
                                                                  <img src="/GedeonMvc/resources/accountPictures/${val.imageName}" name="imgAccount" id="imgAccount" class="black" alt="" style="width: 200px; height: 150px;" />
                                                              
                                                                </div><br>
								<div> 
								<input type="file" accept="image/*" class="default" id="imageFile" name="imageFile" style="display:none;" />
                                                            
                                                            <button class="btn purple" data-dismiss="fileupload" onclick="document.getElementById('imageFile').click();"  type="button" >Subir</button>	 
							    <button class="btn black" data-dismiss="fileupload" id="BtnClear" name="BtnClear"  type="button" >Limpiar</button>	
                                                                </div>
						         </div>
							  </div>
							</div>
                                                      </c:forEach>
                                                       </div>
						   
                                                    <div class="tab-pane" id="tab_1_2">
                                                        <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboCountryBill">Country Bill : &nbsp;</label>
								<div class="controls">
								 <select class="span12 select2_category"  onchange="getDepartment(this.value , 'CboDepartmentBill');" id="CboCountryBill" name="CboCountryBill" data-placeholder="Choose a Country" tabindex="1">
                                                                    <option value=""></option>
								 <c:forEach var="valPlace" items="${country_bill}">
                                                                         <option value="${valPlace.longCode.trim()}"    
                                                                            <c:if test="${valPlace.longCode.trim() == val.countryBill.longCode.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option>
                                                                 </c:forEach> 
							       </select>
                                                                </div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDepartmentBill">Department Bill  : &nbsp;</label>
								<div class="controls">
                                                                 <select class="span12 select2_category" onchange="getProvince(CboCountryBill.value , this.value , 'CboProvinceBill');" id="CboDepartmentBill" name="CboDepartmentBill" data-placeholder="Choose a Department" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${department_bill}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.departmentBill.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
								</div>
							    </div>
							   </div>
						   </div>
                                                         
                                                        <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboProvinceBill">Province Bill : &nbsp;</label>
								<div class="controls">
								<select class="span12 select2_category" onchange="getDistrict(CboCountryBill.value , CboDepartmentBill.value , this.value , 'CboDistrictBill');" id="CboProvinceBill" name="CboProvinceBill" data-placeholder="Choose a Province" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${province_bill}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.provinceBill.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDistrictBill">District Bill  : &nbsp;</label>
								<div class="controls">
								 <select class="span12 select2_category" id="CboDistrictBill" name="CboDistrictBill" data-placeholder="Choose a District" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${district_bill}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.districtBill.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
                                                                </div>
							    </div>
							   </div>
						   </div>
                                                        
                                                          <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="addressbill">Address Bill : &nbsp;</label>
								<div class="controls">
								  <input type="text" id="addressbill" name="addressBill"   value="${val.addressBill.trim()}" placeholder="Address Bill" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="emailbill">Email Bill  : &nbsp;</label>
								<div class="controls">
								 <input type="text"   value="${val.emailBill.trim()}" class="m-wrap span12"  id="emailBill" name="emailBill" placeholder="Email Bill" >
								</div>
							    </div>
							   </div>
						   </div>
                                                     </c:forEach>      
                                                        
						</div>
							
                                                 <div class="tab-pane" id="tab_1_3">
                                                     <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboCountryShipping">Country Shipping : &nbsp;</label>
								<div class="controls">
								<select class="span12 select2_category"  onchange="getDepartment(this.value , 'CboDepartmentShipping');" id="CboCountryShipping" name="CboCountryShipping" data-placeholder="Choose a Country" tabindex="1">
                                                                    <option value=""></option>
								 <c:forEach var="valPlace" items="${country_bill}">
                                                                         <option value="${valPlace.longCode.trim()}"    
                                                                            <c:if test="${valPlace.longCode.trim() == val.countryShipping.longCode.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option>
                                                                 </c:forEach> 
							       </select>
                                                                     
                                                                </div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDepartmentShipping">Department Shipping  : &nbsp;</label>
								<div class="controls">
                                                                    <select class="span12 select2_category" onchange="getProvince(CboCountryShipping.value , this.value , 'CboProvinceShipping');" id="CboDepartmentShipping" name="CboDepartmentShipping" data-placeholder="Choose a Department" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${department_shipping}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.departmentShipping.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
								</div>
							    </div>
							   </div>
						   </div>
                                                         <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboProvinceShipping">Province Shipping : &nbsp;</label>
								<div class="controls">
								 <select class="span12 select2_category" onchange="getDistrict(CboCountryShipping.value , CboDepartmentShipping.value , this.value , 'CboDistrictShipping' );" id="CboProvinceShipping" name="CboProvinceShipping" data-placeholder="Choose a Province" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${province_shipping}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.provinceShipping.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDistrictShipping">District Shipping  : &nbsp;</label>
								<div class="controls">
								 <select class="span12 select2_category" id="CboDistrictShipping" name="CboDistrictShipping" data-placeholder="Choose a District" tabindex="1">
                                                                    <option value=""></option> 
                                                                    <c:forEach var="valPlace" items="${district_shipping}">
                                                                        <option value="${valPlace.code.trim()}"
                                                                                <c:if test="${valPlace.code.trim() == val.districtShipping.code.trim()}">selected</c:if> 
                                                                         >${valPlace.name.trim()}</option> 
                                                                    </c:forEach>
							       </select>
								</div>
							    </div>
							   </div>
						   </div>
                                                        
                                                          <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="addressshipping">Address Shipping : &nbsp;</label>
								<div class="controls">
								  <input type="text"  id="addressShipping" name="addressShipping" placeholder="Address Shipping"  value="${val.addressShipping.trim()}"  class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="emailShipping">Email Shipping  : &nbsp;</label>
								<div class="controls">
								 <input type="text"   value="${val.emailShipping.trim()}"  class="m-wrap span12"  id="emailShipping" name="emailShipping" placeholder="Email Shipping"  >
								</div>
							    </div>
							   </div>
						   </div>
                                                       </c:forEach>   
                                                     
                                                        
						</div>
							
                                                </div>
                                                            
                                                             <div class="control-group"> 
                                                               <div class="controls">
                                                               </div>
                                                            </div>  
                                                            <div class="control-group"> 
                                                               <div class="controls">
                                                                     <a class="btn blue"  data-toggle='modal' onclick="validateForm();" href="#static"><i class="icon-ok"></i> Save</a>
                                                                     <button class="btn gray cleardata" id="BtnClearData" name="BtnClearData" type="button" ><i class="icon-trash"></i> Clear</button>
                                                                     <a href="index?module=<%=request.getParameter("module") %>"><button class="btn red" type="button"><i class="icon-remove"></i> Cancel</button></a>
								  </div>
                                                            </div>  
							</div> 
							</div>
						</div>
                                              </div> 
					</div> 
				</div>
                                  <div id="static" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
                                    <div class="modal-body" id="bodyMessage">
					<p></p>
                                    </div>
                                    <div class="modal-footer">
                                    <button type="button" data-dismiss="modal" class="btn black">Ok</button>
                                    </div>    
                                </div> 
                        
                  <c:forEach var="system" items="${dataSystem}"> 
                      <input type="hidden" value="${system.id}" name="createdBy" id="createdBy" /> 
                      <input type="hidden" value="${system.id}" name="ownerId" id="ownerId" /> 
                  </c:forEach>  
                  <input type="hidden" value="no" name="picture" id="picture" />   
                  <input type="hidden" value="<%=request.getParameter("module") %>" name="module" id="module"/>
                  <input type="hidden" value="<%=request.getParameter("id") %>" name="id" id="id"/>
               </form:form>
            </div>
        </div> 
        <%@include file="../../template/footer.jsp"%> 
        <script>
		jQuery(document).ready(function() {     
                   
     
        FormSamples.init();
        FormComponents.init();
                   UIJQueryUI.init(); 		
    });
	</script>
    </body>
</html>







































